<!--
 工作流节点, 只能作为event-flow的子节点
 @Author: zhanbh
 @Date: 2021-04-11
-->
<template>
  <div class="event-node" :style="nodeStyle">
    <main class="event-node__main" ref="main">
      <!-- 信息内容 -->
      <div class="event-node__content">
        <slot></slot>
      </div>

      <!-- 箭头 -->
      <div class="event-node__arrow arrow-up" :class="arrowInfo.iconClass">
        <i class="arrow-up__head el-icon-caret-top"></i>
        <span class="arrow-up__line"></span>
      </div>

      <!-- 时间轴上的节点 -->
      <i class="event-node__icon" :class="[arrowInfo.icon, arrowInfo.iconClass]">{{ arrowInfo.iconText }}</i>

      <!-- 时间轴下的时间信息 -->
      <span class="event-node__time">{{ time }}</span>
    </main>

    <!-- 时间轴的线 -->
    <span v-if="!isFirst || !isLast" class="event-node__line" :style="lineStyle"></span>
    <!-- 时间线拐角 -->
    <span v-if="isCorner" class="event-node__corner" :style="cornerStyle"></span>
  </div>
</template>

<script>
export default {
  name: 'EventNode',
  props: {
    status: {
      type: String,
      default: '1'
    },
    zlsjlx: {
      type: String,
      default: 0
    },
    time: [Date, String, Number],
    minHeight: String,

    isFirst: Boolean, // 是否是第一个节点
    isLast: Boolean, // 是否是最后一个节点
    isLastRow: Boolean, // 是否是最后一行
    isOddRow: Boolean, // 是否是奇数行
    isCorner: Boolean, // 是否是角落
    isCornerStart: Boolean, // 是否是拐角的开始部分

    flexWidth: Number, // 扩展后的宽度
    flexOrder: Number // flex 的order值
  },
  data() {
    return {};
  },
  computed: {
    /**
     * 节点的样式
     * 主要处理顺序，高度, flex-grow配置
     * @return {string}
     */
    nodeStyle() {
      let { flexOrder, isOddRow, isCorner, isCornerStart, isLast, minHeight, flexWidth } = this;
      let style = '';

      if (typeof minHeight === 'string' && minHeight.trim() !== '') {
        style += `min-height: ${minHeight};`;
      }

      if (flexOrder && flexOrder !== 0) {
        style = `order: ${flexOrder};`;
      }

      // 行的最后一个要自动撑宽
      if ((isCorner && isCornerStart) || isLast) {
        style += `flex-grow: 1; text-align: ${isOddRow ? 'left' : 'right'};`;
      }

      if (flexWidth) {
        style += `width: ${flexWidth}px;`;
      }

      return style;
    },

    /**
     * 时间线的样式
     * 根据节点的位置不同，样式不同
     * 主要关注行两端的角落节点
     */
    lineStyle() {
      const vm = this;
      const { isFirst, isLast, isOddRow, isCorner, isLeftCorner } = vm;
      let style = '';

      if (isFirst) {
        style += 'width: 50%; right: 0; left: auto;';
      } else if (isLast && vm.$refs.main) {
        // 最后一个节点，比较复杂 因为最后一个需要自动扩展，但线只能是真实节点的一半
        let width = vm.$refs.main.offsetWidth / 2;

        if (isCorner) {
          style += `width: calc(${width}px - 2rem);`;

          if (isOddRow) {
            style += 'left: 2rem;';
          } else {
            style += 'right: 2rem; left: auto;';
          }
        } else {
          style += `width: ${width}px;`;

          if (!isOddRow) {
            style += 'right: 0; left: auto;';
          }
        }
      } else if (isCorner) {
        // 普通拐角 留出拐角的位置
        style += `width: calc(100% - 2rem);`;

        if (isLeftCorner) {
          style += 'right: 0; left: auto;';
        }
      }

      return style;
    },

    /**
     * 拐角的样式
     */
    cornerStyle() {
      let { isLeftCorner, isCornerStart, isCorner } = this;
      let style = '';

      if (!isCorner) {
        return style;
      }

      if (isCornerStart) {
        style += 'height: 6.625rem;';
        style += 'bottom: 0;';
      } else {
        style += 'height: calc(100% - 6.625rem);';
        style += 'top: -1px;';
      }

      if (isLeftCorner) {
        style += 'border-left-width: 1px;';
        style += 'left: 0;';

        if (isCornerStart) {
          style += 'border-top-width: 1px;';
          style += 'border-top-left-radius: 1rem;';
        } else {
          style += 'border-bottom-width: 1px;';
          style += 'border-bottom-left-radius: 1rem;';
        }
      } else {
        style += 'border-right-width: 1px;';
        style += 'right: 0;';

        if (isCornerStart) {
          style += 'border-top-width: 1px;';
          style += 'border-top-right-radius: 1rem;';
        } else {
          style += 'border-bottom-width: 1px;';
          style += 'border-bottom-right-radius: 1rem;';
        }
      }

      return style;
    },

    // 是否是左侧的拐角
    isLeftCorner() {
      let { isOddRow, isCorner, isCornerStart } = this;

      return isCorner && ((isOddRow && !isCornerStart) || (!isOddRow && isCornerStart));
    },
    /**
     * 箭头的样式信息
     * 不属于三个状态的，则使用配置的自定义
     * @return {Object}
     */
    arrowInfo() {
      let obj = {};
      if (+this.zlsjlx === 0 || +this.status === 1) {
        obj = {
          icon: 'el-icon-check',
          iconText: '',
          iconClass: 'is-success'
        };
      } else {
        obj = {
          icon: '',
          iconText: '!',
          iconClass: 'is-error'
        };
      }
      return obj;
    }
  },
  methods: {},
  created() {}
};
</script>
<style scoped lang="scss">
@import '../variable';

.event-node {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;

  min-height: 22rem;

  text-align: center;
  overflow: hidden;
  z-index: 0;

  &__main {
    @include flex-column;

    height: 100%;
    padding: 0 2rem;

    text-align: left;
  }

  /* 第一个节点左对齐 */
  &:first-child &__main {
    padding-left: 0;
  }

  &__content,
  &__icon,
  &__time {
    @include flex-free(0);
  }
  &__arrow {
    @include flex-free(1);
  }

  &__icon {
    @include round(1.5rem, 1.5rem);

    font-size: 1rem;
    color: #fff;
    font-style: normal;
    background-color: $--info;
    &.is-error {
      background-color: $--error;
    }
    &.is-success {
      background-color: $--success;
    }
  }

  &__time {
    margin: 0.75rem 0 4.25rem 0;

    height: 0.875rem;

    color: #808080;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
  }

  &__line {
    position: absolute;
    bottom: 6.625rem;
    left: 0;

    width: 100%;
    height: 1px;
    box-sizing: border-box;
    border-top: solid 1px #d9d9d9;

    z-index: -1;
  }

  &__corner {
    position: absolute;

    width: 2rem;
    border: solid 0 #d9d9d9;
  }
}

.arrow-up {
  @include flex-column;

  &__head {
    @include flex-free(0);

    color: $--info;
    font-size: 23px;
    line-height: 0.4;
  }
  &.is-error &__head {
    color: $--error;
  }
  &.is-success &__head {
    color: $--success;
  }
  &__line {
    @include flex-free(1);

    width: 1px;
    min-height: 1.5rem;
    background-color: $--info;
  }
  &.is-error &__line {
    background-color: $--error;
  }
  &.is-success &__line {
    background-color: $--success;
  }
}
</style>
